<template>
  <el-dialog append-to-body title="修改门店" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'720px'">
    <el-form :inline="true" size="small" ref="form" :model="myForm">
      <el-form-item>
        <el-input size="small" v-model.trim="myForm.mchName" placeholder="请输入商户名称" clearable maxlength="30"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model.trim="myForm.storeName" placeholder="请输入门店名称" clearable maxlength="30"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
        <el-button size="small" class="width_104" @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table class="margin_top_20" ref="multipleTableContent" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading" @select="handleOneItem">
      <el-table-column type="selection" width="55" :reserve-selection="true" :selectable="checkSelectable"></el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="mchId" label="商户编码"></el-table-column>
      <el-table-column prop="mchName" label="商户名称"></el-table-column>
      <el-table-column prop="id" label="门店ID"></el-table-column>
      <el-table-column prop="storeName" label="门店名称"></el-table-column>
      <el-table-column prop="storeImg" label="门店图片">
        <template slot-scope="scope">
          <img :src="'https://yswl-cloud-service.obs.cn-north-4.myhuaweicloud.com/' + scope.row.storeImg" alt="" width="80" height="80" />
        </template>
      </el-table-column>
      <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
    </el-table>
    <div class="text-center">
      <br />
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="submitLoading" @click="cancel()">取消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="validForm()">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Setting from '@/settings'
import { AddMerchantDevice, UpdateMerchantDevice, GetMerchantShopList } from '@/views/merchant-management/services'
export default {
  props: ['visible', 'data'],
  data() {
    return {
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      loading: false,
      submitLoading: false,
      pageData: [],
      pageCount: 0,
      checkedList: [],
      myForm: {
        mchName: '',
        storeName: '',
      },
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return
        if (!this.data) return
        this.setData()
      },
    },
  },
  computed: {
    title() {
      return this.data && this.data.id ? '编辑' : '新增'
    },
  },
  methods: {
    reset() {
      this.pageIndex = 1
      this.myForm.mchName = ''
      this.myForm.storeName = ''
      this.getPageDataList()
    },
    cancel() {
      this.closeModel()
    },
    closeModel() {
      this.$emit('update:visible', false)
      this.reset()
    },
    handleOneItem(selection, row) {
      this.checkedList = selection
    },
    checkSelectable(row, index) {
      if (this.checkedList[0]) {
        if (this.checkedList[0].id == row.id) {
          return 1
        }
        return 0
      } else {
        return 1
      }
    },
    handlePagingChange(event) {
      this.pageIndex = event
      this.getPageDataList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },
    getPageDataList() {
      this.loading = true
      GetMerchantShopList({
        mchName: this.myForm.mchName,
        storeName: this.myForm.storeName, //店铺名称
        ledgerName: this.myForm.name2, // 法人名称
        contactPhone: this.myForm.name3, // 联系电话
        enableStatus: this.myForm.status1, // 启用状态：0启用，1禁用
        isSupplier: this.myForm.status2, // 是否为供应商：0否，1是
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      })
        .finally(() => (this.loading = false))
        .then(res => {
          if (res && res.code == 200) {
            this.pageData = res.data.list
            this.pageCount = res.data.total

            if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1
              this.getPageDataList()
            }
          }
        })
    },
    validForm() {
      if (!this.myForm.name) {
        this.$message.warning('请输入设备名称!')
        return
      }
      if (!this.myForm.code) {
        this.$message.warning('请输入设备编号!')
        return
      }
      if (!Setting.expression[0].value.test(this.myForm.code)) {
        this.$message.warning('设备编号只能输入字母和数字!')
        return
      }
      this.submitLoading = true
      const queryData = {
        equipmentNo: this.myForm.code,
        equipmentName: this.myForm.name,
        status: 0,
        enableStatus: this.myForm.status ? 0 : 1,
        activationTime: this.data && this.data.id ? this.data.activationTime : moment().format('YYYY-MM-DD HH:mm:ss'),
        creatorId: this.data && this.data.id ? this.data.creatorId : JSON.parse(this.$store.state.user.userInfo).id,
      }
      if (this.data && this.data.id) {
        UpdateMerchantDevice({
          ...queryData,
          id: this.data && this.data.id,
        })
          .finally(() => (this.submitLoading = false))
          .then(success => {
            if (success.code == 200) {
              this.$message.success(`${this.title}成功!`)
              this.closeModel()
              this.$emit('update', this.name)
            } else {
              this.$message.error(`${this.title}失败!`)
            }
          })
        return
      }
      AddMerchantDevice(queryData)
        .finally(() => (this.submitLoading = false))
        .then(success => {
          if (success.code == 200) {
            this.$message.success(`${this.title}成功!`)
            this.closeModel()
            this.$emit('update', this.name)
          } else {
            this.$message.error(`${this.title}失败!`)
          }
        })
    },
    setData() {
      this.myForm.name = this.data.equipmentName
      this.myForm.code = this.data.equipmentNo
      this.myForm.mchId = this.data.mchId
      this.myForm.storeId = this.data.storeId
      this.myForm.status = this.data.enableStatus == 0
    },
  },
  created() {
    this.getPageDataList()
  },
}
</script>

<style lang="scss" scoped>
.width_104 {
  width: 104px;
}
::v-deep .el-table th > .cell:nth-child(1) .el-checkbox {
  display: none;
}
</style> 
